<template>
	<view class="fiction">
		<!-- <view class="loading-text" v-if="!init">正在加载...</view> -->
		<u-empty margin-top="32" v-if="init && list.length === 0"></u-empty>
		
		<view class="container">
			<view class="item" v-for="item in list" :key="item.id" @click="_details(item)">
				<image :src="item.images[0]" mode="aspectFill" v-if="item.images.length"></image>
				<image src="http://fpoimg.com/200x300" mode="aspectFill" v-else></image>
				<view class="item-right">
					<view class="title u-line-1">{{ item.title }}</view>
					<view class="intro u-line-2">{{ item.intro }}</view>
					<view class="username">作者: {{ item.nickname || item.username }}</view>
				</view>
			</view>
		</view>
		
		<view class="tabbar">
			<tabbar />
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Tabbar from '@/components/v-tabbar/v-tabbar.nvue'
	import { ArticleList } from '@/common/api.js'
	
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				list: [],
				isLastPage: false,
				init: false
			}
		},
		onLoad() {
			this._list()
		},
		onShow() {
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
			this._list()
		},
		onReachBottom() {
			if (this.isLastPage) return
			this.page++
			this._list()
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		onNavigationBarButtonTap() {
			if (this.isLogin) {
				uni.navigateTo({ url: '/pages/Fiction/Publish' })
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					success() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			}
		},
		methods: {
			_details({ id, title }) {
				uni.navigateTo({
					url: `/pages/Fiction/Details?title=${title}&id=${id}`
				})
			},
			_list() {
				ArticleList({
					page: this.page,
					limit: 10,
					type: 5
				}).then(({ code, data }) => {
					console.log(data)
					this.init = true
					if (code === 200) {
						const { list, total_page, current_page } = data
						if (current_page === 1) {
							this.list = list
						} else {
							this.list = this.list.concat(list)
						}
						if (current_page >= total_page) {
							this.isLastPage = true
						}
					}
					uni.stopPullDownRefresh()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.username {
		font-size: 24rpx;
		color: #606266;
	}
	.title {
		font-size: 32rpx;
		color: #303133;
	}
	.intro {
		color: #909399;
		margin-top: 8rpx;
		margin-bottom: 32rpx;
	}
	.item-right {
		flex: 1;
		margin-left: 16rpx;
		overflow: hidden;
	}
	.container {
		padding: 24rpx 24rpx 0;
	}
	.item {
		image {
			width: 165rpx;
			height: 215rpx;
		}
		display: flex;
		margin-bottom: 24rpx;
		background-color: #fff;
		padding: 16rpx;
	}
	.loading-text {
		text-align: center;
		padding-top: 32rpx;
		color: #909399;
	}
	.text-center {
		text-align: center;
		padding: 32rpx 0;
	}

	.tabbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #fff;
	}
	.fiction {
		padding-bottom: 50px;
	}
</style>
